<!-- 采用html5  -->
<!DOCTYPE html>
<html>

<head>

    <meta charset="UTF-8">

    <!-- 页面显示适应移动设备 -->
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">

    <title>并夕夕</title>
    <link rel="stylesheet" href="resources\we-vue\style.css">
    <link rel="stylesheet" href="resources\css\font-awesome.min.css">
    <style>
        /*元素选择器*/
        html{
            height:100%;
        }
        body{
            height:100%;
            padding:0px;/*内边距*/
            margin:0px;/*外边距*/
        }    
        /* 类选择器 */
        .my-container{
            width:100%;
            height:100%;
            background-color: #f0f0f0;
        }
        .my-title{

            font-size:30px;
            text-align: center;/*水平居中*/
            color:#111111;
            padding-top:10px;
            padding-bottom:0px;
        }
    </style>

</head>

<body>

    <!-- div ：矩形区域 -->
    <div id="app" class="my-container">

        <wv-header title="并夕夕" :fixed="false" background-color="#ff0033">
            <div slot="left">
                <i class="fa fa-angle-left" @click="back"></i>
            </div>
        </wv-header>

        <div class="my-title">个人资料</div>

        <div style="padding-left:3px;padding-right:3px;box-sizing: border-box;">
            <wv-group>
                <wv-cell title="收货地址" is-link to='/' :value="dep.b_add" @click="window.location.href = 'dizhi.html'"></wv-cell>
            </wv-group>

            <wv-group>
                <wv-input label="用户名" :placeholder="dep.b_id" :readonly="true"></wv-input>
                <wv-input label="昵称" :placeholder="dep.b_name" :readonly="true"></wv-input>
                <wv-input label="联系电话" :placeholder="dep.b_phone" :readonly="true"></wv-input>
            </wv-group>

            <wv-button type="warn" @click="change" style="margin-top:10px;">修改资料</wv-button>
            <wv-button type="warn" @click="alter" style="margin-top:10px;">修改密码</wv-button>
            <wv-button type="warn" @click="goindex" style="margin-top:10px;">退出当前账号</wv-button>

        </div>

    </div>

</body>

<script src="resources\js\vue.min.js"></script>
<script src="resources\js\jquery.min.js"></script>
<script src="resources\we-vue\index.js"></script>
<script src="resources\layer_mobile\layer.js"></script>
<script src="resources\js\my.js"></script>

<script>
    //Vue对象的作用就是渲染界面,需要绑定一个元素
    new Vue({
        el: '#app',
        data: {
            dep: {},
        },
        methods: {
            alter() {
                //通过js向另一个页面跳转
                window.location.href = 'changepwd.html';
            },
            change() {
                window.location.href = 'modify.html';
            },
            add() {
                window.location.href = 'dizhi.html';
            },
            back() {
                window.location.href = 'home.html';
            },
            goindex() {
                window.location.href = 'index.html';
            },
            loadList() {
                Serv.loadData({ url: '/person.jsp' }, (dep) => {
                    this.dep = dep;
                });
            },
        },
        mounted() {
            this.loadList();
        },
    });

</script>

</html>